<template>
    <div>
      <div v-html="renderedMarkdown" class="preview"></div>
    </div>
  </template>
  
  <script>
//   import { marked } from 'marked';
//   import katex from 'katex';
//   import 'katex/dist/katex.min.css';
  
  export default {
    props: {
      markdownContent: {
        type: String,
        required: true,
      },
    },
    computed: {
      renderedMarkdown() {
        // 解析 Markdown
        const html = marked(this.markdownContent);
        // 渲染 LaTeX 公式
        return this.renderLatex(html);
      },
    },
    methods: {
      renderLatex(html) {
        // 创建一个 DOM 元素来处理 LaTeX
        const container = document.createElement('div');
        container.innerHTML = html;
  
        // 查找并渲染 LaTeX 公式
        const latexElements = container.querySelectorAll('span.katex');
        latexElements.forEach((element) => {
          const latex = element.textContent;
          const wrapper = document.createElement('span');
          katex.render(latex, wrapper);
          element.replaceWith(wrapper);
        });
  
        return container.innerHTML;
      },
    },
  };
  </script>
  
  <style>
  .preview {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    overflow: auto;
  }
  </style>